<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>购物车页面</title>
	<link rel="stylesheet" href="style/base.css" type="text/css">
	<link rel="stylesheet" href="style/global.css" type="text/css">
	<link rel="stylesheet" href="style/header.css" type="text/css">
	<link rel="stylesheet" href="style/cart.css" type="text/css">
	<link rel="stylesheet" href="style/footer.css" type="text/css">

	<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
	<!-- <script type="text/javascript" src="js/cart1.js"></script> -->
	
</head>
<body>
<div id="app">
	<!-- 顶部导航 start -->
	<topnav></topnav>
	<!-- 顶部导航 end -->
	
	<div style="clear:both;"></div>
	
	<!-- 页面头部 start -->
	<div class="header w990 bc mt15">
		<div class="logo w990">
			<h2 class="fl"><a href="index.html"><img src="images/logo.png" alt="商城"></a></h2>
			<div class="flow fr">
				<ul>
					<li class="cur">1.我的购物车</li>
					<li>2.填写核对订单信息</li>
					<li>3.成功提交订单</li>
				</ul>
			</div>
		</div>
	</div>
	<!-- 页面头部 end -->
	
	<div style="clear:both;"></div>

	<!-- 主体部分 start -->
	<div class="mycart w990 mt10 bc">
		<h2><span>我的购物车</span></h2>
		<table>
			<thead>
				<tr>
					<th><input type="checkbox" v-model="isTrue" @change="checkedThisBox"></th>
					<th class="col1">商品名称</th>
					<th class="col2">商品信息</th>
					<th class="col3">单价</th>
					<th class="col4">数量</th>	
					<th class="col5">小计</th>
					<th class="col6">操作</th>
				</tr>
			</thead>
			<tbody>
				<tr v-if="carts.length==0">
					<td colspan="7" style="height: 50px">当前购物车中还没有商品~~~</td>
				</tr>
				<tr v-for="(v,k) in carts">
					<td><input type="checkbox" @change="updateCart(k)" v-model="v.checked"></td>
					<td class="col1"><a href=""><img :src="v.midlogo" alt="" /></a>  <strong><a href="">{{v.goods_name}}</a></strong></td>
					<td class="col2"> <p>{{v.spec_info}}</p></td>
					<td class="col3">￥<span>{{v.price}}</span></td>
					<td class="col4"> 
						<a href="javascript:;" class="reduce_num" @click="reduce_num(k)"></a>
						<input type="text" name="amount" v-model="v.count" class="amount" @change="updateCart(k)"/>
						<a href="javascript:;" class="add_num" @click="add_num(k)" ></a>
					</td>
					<td class="col5">￥<span>{{(v.price * v.count).toFixed(2)}}</span></td>
					<td class="col6"><a href="" @click.prevent="del(k)">删除</a></td>
				</tr>
			</tbody>
			<tfoot>
				<tr>
					<td colspan="6">购物金额总计： <strong>￥ <span id="total">{{totalPrice}}</span></strong></td>
				</tr>
			</tfoot>
		</table>
		<div class="cart_btn w990 bc mt10">
			<a href="" class="continue">继续购物</a>
			<a href="" @click.prevent="submitCart" class="checkout">结 算</a>
		</div>
	</div>
	<!-- 主体部分 end -->

	<div style="clear:both;"></div>
	<!-- 底部版权 start -->
	<div class="footer w1210 bc mt15">
		<p class="links">
			<a href="">关于我们</a> |
			<a href="">联系我们</a> |
			<a href="">人才招聘</a> |
			<a href="">商家入驻</a> |
			<a href="">千寻网</a> |
			<a href="">奢侈品网</a> |
			<a href="">广告服务</a> |
			<a href="">移动终端</a> |
			<a href="">友情链接</a> |
			<a href="">销售联盟</a> |
			<a href="">商城论坛</a>
		</p>
		<p class="copyright">
			 © 2005-2013 京东网上商城 版权所有，并保留所有权利。  ICP备案证书号:京ICP证070359号 
		</p>
		<p class="auth">
			<a href=""><img src="images/xin.png" alt="" /></a>
			<a href=""><img src="images/kexin.jpg" alt="" /></a>
			<a href=""><img src="images/police.jpg" alt="" /></a>
			<a href=""><img src="images/beian.gif" alt="" /></a>
		</p>
	</div>
	<!-- 底部版权 end -->
</div>
	<!--vue-----------------------------------------------------------------statrt-->
	<script src="js/vue-2.5.17.js"></script>	<!--vue-->
	<!-- 引入组件库 -->
	<script src="https://unpkg.com/element-ui/lib/index.js"></script>
	<!-- 引入样式 -->
	<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
	<script src="js/axios-0.18.0.js"></script>	<!--axios-->
	<script src="http://mockjs.com/dist/mock.js"></script><!--mock官方-->
	<script src="js/mock.js"></script><!--mock数据-->
	<script src="js/api.js"></script><!--api自定义-->
	<script src="components/TopNav.js"></script><!--组件-->
	<script>
		var vm = new Vue({
			el:"#app",
			data:{
				carts:[],	//购物车对象
				token:localStorage.getItem('token'),
				isTrue:true,	//是否全选
			},
			created(){
				//* 判断token
				if(this.token){
					//发送请求
					getCartsArr().then((res)=>{
						this.carts = res.data.data
					})
				}else{
					//从localStorage中取出cart
					let cart = localStorage.getItem('cart')
					//判断是否为null,获取浏览器购物车的初始化数据
					if(cart != null){
						this.carts = JSON.parse(cart)
					}
				}
				
			},
			methods:{
				
				//数量+-
				reduce_num(k){
					if(this.carts[k].count>=1){
						this.carts[k].count--,
						//修改完数据后，重新放入本地储存
						//localStorage.setItem('cart',JSON.stringify(this.carts))
						this.updateCart(k)
					}
				},
				add_num(k){
					this.carts[k].count++
					//修改完数据后，重新放入本地储存
					//localStorage.setItem('cart',JSON.stringify(this.carts))
					this.updateCart(k)
				},
			
				//删除购物选项---------------
				del(k){
					if(confirm('确认删除嘛？')){
						this.carts.splice(k,1)
						//判断用户是否登录
						if(this.token){
							deleteCart(this.carts[k].skuid)
							return
						}else{
							//更新数据库
							this.updateCart(k)
						}
					}
					// 	this.carts.splice(k,1)
					// localStorage.setItem('cart',JSON.stringify(this.carts))				
				},
				//直接修改数量值
				//更新第K个商品（如果登录了就直接更新服务器，否则就更新浏览器）
				updateCart(k){
					this.isChecked()		
					//--------------
					if(this.token){
						//根据skuid修改服务器的商品数量和勾选状态
						updateCart(this.carts[k].skuid,{
							count:this.carts[k].count,
							checked:this.carts[k].checked
						}).then((res)=>{
							
						})
					}else{
						//数据修改完成之后，继续放入本地储存
						localStorage.setItem('cart',JSON.stringify(this.carts))
					}
				},
				//全选&全不选***************
				checkedThisBox(){
						
						for(let i=0; i<this.carts.length; i++){
							this.carts[i].checked = this.isTrue	//选中或不选择
							//数据修改完成之后，继续放入本地储存
							//localStorage.setItem('cart',JSON.stringify(this.carts))
						}
					
				},
				//判断子选项是否全部选中，如果全部选中就选中控制权选按钮。反之
				isChecked(){	
					for(let i=0; i<this.carts.length; i++){
						if(this.carts[i].checked==false){
							this.isTrue=false
							break
						}else{
							this.isTrue=true
						}
					}
					
				},
				//提交购物车
				submitCart(){
					//判断是否登录，登录了直接提交订单 跳入收货地址
					if(this.token){
						location.href="flow2.html"
					}else{
						//将页面存入sessionstorage中
						sessionStorage.setItem("loghtml","flow1.html")
						location.href="login.html"
					}
					
				}
			
			},
			watch:{
			
			},
			//计算属性
			computed:{
				totalPrice(){
					let sum = 0;
					//循环计算总价
					for(let i=0;i<this.carts.length;i++){
						if(this.carts[i].checked){
							sum += this.carts[i].price * this.carts[i].count
						}
					}
					//返回值	(JS小数会出现问题)
					return sum.toFixed(2)
				}
			}
		})
	</script>
</body>
</html>
